.swiper-wrapper {
    position: relative;
    .prev,
    .next {
        position: absolute;
        opacity: 0.2;
        top: 50%;
        cursor: pointer;

        .arrow-image {
            width: 100px;
            height: 100px;
        }
    }

    .prev {
        transform: translateX(-100%) translateY(-50%);
    }

    .next {
        left: 100%;
        transform: translateY(-50%);
    }
}

.swiper {
    position: relative;
    border: 8px black solid;
    border-radius: 20px;
    overflow: hidden;

    .image-wrapper {
        position: absolute;
        display: flex;
        width: 100%;
        height: 100%;
        top: 0;

        .swiper-image {
            flex: none;
            width: 100%;
            height: 100%;
            font-size: 100px;
            background-size: cover;
            background-position: center;
        }
    }

    .bottom-wrapper {
        width: 100%;
        height: 35px;
        left: 0;
        bottom: 0;
        position: absolute;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 10px;
        padding-right: 20px;
        background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.4)
        );

        .dot-wrapper {
            flex: none;
            display: flex;
            margin-left: 20px;
            position: relative;

            .dot {
                // width: 18px;
                // height: 18px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;

                // &:not(:last-child) {
                //     margin-right: 8px;
                // }

                .dot-center {
                    // width: 10px;
                    // height: 10px;
                    border-radius: 50%;
                    background-color: white;
                }

                // &:hover {
                //     .dot-center {
                //         // width: 100%;
                //         // height: 100%;
                //         // border: 4px solid #3e83fb;
                //         background-color: #3e83fb;
                //     }
                // }
            }

            .bean {
                position: absolute;
                width: 18px;
                height: 18px;
                left: 0;
                top: 0;
                background-image: url("../../../public/bean.png");
            }
        }

        .title {
            line-height: 21px;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            flex: auto;
            font-size: 14px;
            font-weight: bold;
            color: white;
        }
    }
}
